import { useState } from 'react'
import './index.scss'
// import { Button } from 'antd';
import icon from "/src/assets/react.svg"

function DivFunc() {
  const [data, _] = useState(

    //统计
    {
      numberList: [
        [
          {
            name: '今日访问量',
            sum: '230',
            icon: null,
          }, {
            name: '昨日访问量',
            sum: '240', icon: null,
          }, {
            name: '七日访问量',
            sum: '1460', icon: null,
          }, {
            name: '本月访问量',
            sum: '5720', icon: null,
          }, {
            name: '本年访问量',
            sum: '77000', icon: null,
          }, {
            name: '总访问量',
            sum: '87000', icon: null,
          }
        ], [
          {
            name: '今日发布量',
            sum: '9999',icon: null,
          }, {
            name: '昨日发布量',
            sum: '9999',icon: null,
          }, {
            name: '七日发布量',
            sum: '9999',icon: null,
          }, {
            name: '本月发布量',
            sum: '9999',icon: null,
          }, {
            name: '本年发布量',
            sum: '9999',icon: null,
          }, {
            name: '总发布量',
            sum: '9999',icon: null,
          }
        ], [
          {
            name: '今日评论量',
            sum: '9999',icon: null,
          }, {
            name: '昨日评论量',
            sum: '9999',icon: null,
          }, {
            name: '七日评论量',
            sum: '9999',icon: null,
          }, {
            name: '本月评论量',
            sum: '9999',icon: null,
          }, {
            name: '本年评论量',
            sum: '9999',icon: null,
          }, {
            name: '总评论量',
            sum: '9999',icon: null,
          }
        ], [
          {
            name: '今日新用户',
            sum: '9999',icon: null,
          }, {
            name: '昨日新用户',
            sum: '9999',icon: null,
          }, {
            name: '七日新用户',
            sum: '9999',icon: null,
          }, {
            name: '本月新用户',
            sum: '9999',icon: null,
          }, {
            name: '本年新用户',
            sum: '9999',icon: null,
          }, {
            name: '总用户量',
            sum: '9999',icon: null,
          }
        ], [
          {
            name: '今日订单',
            sum: '9999',icon: null,
          }, {
            name: '昨日订单',
            sum: '9999',icon: null,
          }, {
            name: '七日订单',
            sum: '9999',icon: null,
          }, {
            name: '本月订单',
            sum: '9999',icon: null,
          }, {
            name: '本年订单',
            sum: '9999',icon: null,
          }, {
            name: '总订单量',
            sum: '9999',icon: null,
          }
        ], [
          {
            name: '今日支付额',
            sum: '9999',icon: null,
          }, {
            name: '昨日支付额',
            sum: '9999',icon: null,
          }, {
            name: '七日支付额',
            sum: '9999',icon: null,
          }, {
            name: '本月支付额',
            sum: '9999',icon: null,
          }, {
            name: '本年支付额',
            sum: '9999',icon: null,
          }, {
            name: '总支付额',
            sum: '9999',icon: null,
          }
        ], [
          {
            name: '今日退款额',
            sum: '9999',icon: null,
          }, {
            name: '昨日退款额',
            sum: '9999',icon: null,
          }, {
            name: '七日退款额',
            sum: '9999',icon: null,
          }, {
            name: '本月退款额',
            sum: '9999',icon: null,
          }, {
            name: '本年退款额',
            sum: '9999',icon: null,
          }, {
            name: '总退款额',
            sum: '9999',icon: null,
          }
        ]
      ]
    }
  )

  return (
    <div className='statistics_body'>
      {/* 统计数据 */}
      <div className='number media'>
        {
          data.numberList.map((list, i) =>
            <div className='data_box  media align' key={i}>
              {
                list.map((obj, ii) =>
                  <div className='box align' key={ii}>
                    <div className='box_title align'>
                      <img className='icon' src={obj.icon ?? icon}></img>
                      <span className='title'>{obj.name}</span>
                    </div>
                    <span className='data'>{obj.sum}</span>
                  </div>
                )
              }
            </div >
          )
        }
      </div >

      {/* 最近反馈列表 */}
      <div className='tbody media'>
        <span className='box_title'>最近反馈列表</span>
        <div className='list'>
          <div className='box'>
            <span className='date'>2023-12-12</span>
            <span className='title'>其他</span>
            <span className='text'> 反馈问题 反馈问题 反馈问题 反馈问题</span>
          </div>
          <div className='box'>
            <span className='date'>2023-12-12</span>
            <span className='title'>其他</span>
            <span className='text'> 反馈问题 反馈问题 反馈问题 反馈问题</span>
          </div>
        </div>
      </div>

      {/* 最近发布列表 */}
      <div className='tbody media'>
        <span className='box_title'>最近发布列表</span>
        <div className='list'>
          <div className='box'>
            <span className='date'>2023-12-12</span>
            <span className='title'>谈吐</span>
            <span className='text'> 反馈问题 反馈问题 反馈问题 反馈问题</span>
          </div>
          <div className='box'>
            <span className='date'>2023-12-12</span>
            <span className='title'>贴墙</span>
            <span className='text'> 反馈问题 反馈问题 反馈问题 反馈问题</span>
          </div>
        </div>
      </div>

      {/* 最近评论列表 */}
      <div className='tbody media'>
        <span className='box_title'>最近评论列表</span>
        <div className='list'>
          <div className='box'>
            <span className='date'>2023-12-12</span>
            <span className='title'>贴墙</span>
            <span className='text'> 反馈问题 反馈问题 反馈问题 反馈问题</span>
          </div>
          <div className='box'>
            <span className='date'>2023-12-12</span>
            <span className='title'>贴墙</span>
            <span className='text'> 反馈问题 反馈问题 反馈问题 反馈问题</span>
          </div>
        </div>
      </div>

      {/* 最近异常状态 */}
      <div className='tbody media'>
        <span className='box_title'>最近异常状态</span>
        <div className='list'>
          <div className='box'>
            <span className='date'>2023-12-12</span>
            <span className='title'>SQL</span>
            <span className='text'> 反馈问题 反馈问题 反馈问题 反馈问题</span>
          </div>
          <div className='box'>
            <span className='date'>2023-12-12</span>
            <span className='title'>API</span>
            <span className='text'> 反馈问题 反馈问题 反馈问题 反馈问题</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default DivFunc
